<template>
  <div class="category">
    <sidebar v-model="activeKey">
      <sidebar-item
        :title="item.title"
        v-for="(item, index) in categoryList"
        :key="index"
      />
    </sidebar>

    <div class="right">
      <grid :column-num="3" :border="false">
        <grid-item
          v-for="(value, index) in goodsType"
          :key="index"
          :icon="value.image"
          :text="value.title"
          :url="value.link"
        />
      </grid>
      <tabs v-model="active" :border="false" title-active-color="#ff5777">
        <tab :title="val.title" v-for="(val, key) in goodsInfo" :key="key">
          <div class="goodsList">
            <div
              class="goods-item"
              v-for="(item, index) in val.list"
              :key="index"
              @click="goodsClick(item.iid)"
            >
              <v-image :src="item.img" :lazy-load="true"></v-image>
              <div>
                <p class="desc">{{ item.title }}</p>
                <div class="priceAndsc">
                  <span class="price">￥{{ item.price }}</span>
                  <icon name="star-o" /><span>{{ item.cfav }}</span>
                </div>
              </div>
            </div>
          </div>
        </tab>
      </tabs>
    </div>
  </div>
</template>

<script>
import {
  Sidebar,
  SidebarItem,
  Grid,
  GridItem,
  Tab,
  Tabs,
  Image as vImage,
  Icon
} from "vant";
import { get } from "../../helpers/request";
export default {
  name: "category",
  components: { Sidebar, SidebarItem, Grid, GridItem, Tab, Tabs, vImage, Icon },
  data() {
    return {
      active: 0,
      activeKey: 0,
      categoryList: [],
      goodsType: [],
      goodsInfo: {
        pop: { title: "流行", list: [] },
        new: { title: "新款", list: [] },
        sell: { title: "精选", list: [] }
      }
    };
  },
  created() {
    // 初始化第一屏数据
    get("/category").then(res => {
      let categoryList = res.data.category.list;
      this.categoryList = categoryList;
      this.getDate(0);
    });
  },
  methods: {
    async getDate(index) {
      let maitKey = this.categoryList[index].maitKey;
      let miniWallkey = this.categoryList[index].miniWallkey;
      //获取商品类型
      let goodsType = await get("/subcategory", { maitKey });
      this.goodsType = goodsType.data.list;
      //获取商品数据
      for (let type in this.goodsInfo) {
        get("/subcategory/detail", { miniWallkey, type }).then(res => {
          // console.log(res);
          this.goodsInfo[type].list = res;
        });
      }
    },
    goodsClick(iid) {
      this.$router.push("/detail/" + iid);
    }
  },
  watch: {
    activeKey(newVal) {
      this.getDate(newVal);
    }
  }
};
</script>

<style scoped lang="scss">
.van-sidebar {
  width: 90x;
  flex-shrink: 0;
  height: 100vh;
  overflow-y: scroll;
}

.right {
  width: 100%;
  height: 100vh;
  overflow-y: scroll;
}
.van-sidebar::-webkit-scrollbar,
.right::-webkit-scrollbar {
  display: none;
}
.category {
  display: flex;
}
.goodsList {
  box-sizing: border-box;
  padding: 0 4px;
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  .goods-item {
    width: 125px;
    text-align: center;
    padding-bottom: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .desc {
      font-size: 12px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      margin-bottom: 3px;
    }
    .priceAndsc {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      .price {
        color: #ff5777;
        font-size: 12px;
        margin-right: 10px;
      }
    }
  }
}
</style>
